<template>
    <div @contextmenu="handleContextMenu">
        <a @click="openExternal('https://vite.dev')" style="cursor: pointer;">
            <img src="/vite.svg" class="logo" alt="Vite logo" />
        </a>
        <a @click="openExternal('https://vuejs.org/')" style="cursor: pointer;">
            <img src="../assets/vue.svg" class="logo vue" alt="Vue logo" />
        </a>
        <HelloWorld msg="Vite + Vue" />
        <SystemInfo />
    </div>
</template>

<script setup lang="ts">
import HelloWorld from '../components/HelloWorld.vue'
import SystemInfo from '../components/SystemInfo.vue'

const openExternal = (url: string) => {
    window.electronAPI.openExternal(url)
}

// 鼠标右键
const handleContextMenu = (event: MouseEvent) => {
    // 阻止默认右键菜单
    event.preventDefault();
    window.electronAPI.showContextMenu();
    // 获取dom元素
    console.log("🚀 ~ handleContextMenu ~ event.target:", event.target)
}
</script>

<style scoped lang="scss">
.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
}

.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
}
</style>